<div class="primeng-datatable-container" [busyIf]="isLoading">
  <h5 class="mb-4"><i class="fa fa-cubes"></i> 工装信息</h5>
  <div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
    <div class="m-demo__preview text-center" style="padding: 10px;">
      <div class="row">
        <div class="col-3" *ngFor="let tooling of toolings" style="margin-top: 15px;">
          <div style="text-align: center;">
            {{ tooling.name }} <span *ngIf="tooling.isReady" class="m-badge m-badge--success m-badge--wide"> 有 </span>
            <span *ngIf="!tooling.isReady" class="m-badge m-badge--danger m-badge--wide"> 缺 </span>
          </div>
          <div style="text-align: center;">{{ tooling.spec }}</div>
        </div>
      </div>
    </div>
  </div>

  <h5 class="mb-4"><i class="fa fa-cubes"></i> 物料需求信息</h5>
  <div *ngFor="let bill of bills" class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
    <div class="m-demo__preview text-center" style="padding: 10px;">
      <div class="row">
        <div class="col-md-2">
          <small class="text-muted">任务编号</small>
          <h6 style="margin-top: 10px;">{{ subTaskCode }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">图号</small>
          <h6 style="margin-top: 10px;">{{ drawingCode }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">投产数量</small>
          <h6 style="margin-top: 10px;">{{ bill.amountPlanned }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">牌号</small>
          <h6 style="margin-top: 10px;">{{ bill.paiHao }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">状态</small>
          <h6 style="margin-top: 10px;">{{ bill.materialStatus }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">标准</small>
          <h6 style="margin-top: 10px;">{{ bill.paiHaoStandard }}</h6>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-md-2">
          <small class="text-muted">物资名称</small>
          <h6 style="margin-top: 10px;">{{ bill.materialName }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">材料/产品</small>
          <h6 style="margin-top: 10px;">{{ bill.productAmount }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">规格</small>
          <h6 style="margin-top: 10px;">{{ bill.materialSpec }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">尺寸</small>
          <h6 style="margin-top: 10px;">{{ bill.materialSize }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">备注</small>
          <h6 style="margin-top: 10px;">{{ bill.remark }}</h6>
        </div>
      </div>
    </div>
  </div>

  <div *ngIf="outs.length" class="mb-4">
    <h5 class="mb-4"><i class="fa fa-list"></i> 出库信息</h5>
    <p-table
      [value]="outs"
      rows="10"
      [paginator]="false"
      [scrollable]="true"
      ScrollWidth="100%"
      [responsive]="primengTableHelper.isResponsive"
      [resizableColumns]="primengTableHelper.resizableColumns"
    >
      <ng-template pTemplate="header">
        <tr>
          <th width="80px">出库数量</th>
          <th *ngFor="let col of selectedColumns" width="{{col.width}}">{{ col.header }}</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-record>
        <tr>
          <th width="80px">{{ record.quantity }}</th>
          <td *ngFor="let col of selectedColumns" width="{{col.width}}">{{ record[col.field] }}</td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</div>

<div class="form-group">
  <label>质控卡号</label>
  <input
    #zhiKongKaInput="ngModel"
    class="form-control"
    type="text"
    name="zhiKongKa"
    [(ngModel)]="zhiKongKaNo"
    required
  />
  <validation-messages [formCtrl]="zhiKongKaInput"></validation-messages>
</div>

<div class="row">
  <div class="col-lg-12">
    <button
      type="button"
      class="btn btn-sm btn-success float-right"
      (click)="save()"
      [disabled]="!zhiKongKaNo"
      [buttonBusy]="saving"
      [busyText]="'记录中...'"
    >
      <i class="fa fa-check-circle"></i> <span>记录质控卡</span>
    </button>
  </div>
</div>
